<template>
	<div class="ns-groupbuy">
		<el-carousel height="400px" v-loading="loadingAd">
			<el-carousel-item v-for="item in adList" :key="item.adv_id"><el-image :src="$img(item.adv_image)" fit="cover" @click="$router.pushToTab(item.adv_url.url)" /></el-carousel-item>
		</el-carousel>
		<!-- 商品列表 -->
		<div class="ns-groupbuy-box" v-loading="loading">
			<div class="ns-groupbuy-title" v-if="pintuanList.length" style="display:none;">
				<i class="iconfont icontuangou"></i>
				<span>团购进行中</span>
			</div>

			<el-card class="box-card member-coupon">
            <!-- <div slot="header" class="clearfix">拼团专区</div> -->
            <div class="my-account">
                <div class="detail" v-if="pintuanList.length > 0">
                    <ul v-for="(item, index) in pintuanList" :key="index">
                        <li class="detail_list">
                            <img :src="$img(item.sku_image.split(',')[0],{ size: $goodsImgType('big',item.source) })" alt="" />
                            <div class="timeShow">距结束{{item.time_data.day}}天{{item.time_data.hr}}:{{item.time_data.min}}:{{item.time_data.sec}}</div>
                            <span>{{ item.sku_name }}</span>
                            <!-- <div></div>  -->
                            <p><span class="ori_price"><s>¥{{item.price}}</s></span>¥ {{ item.pintuan_price }}<el-button @click="button(item.id)">去开团</el-button></p>
                        </li>
                    </ul>
                </div>
				
                <div v-if="pintuanList.length == 0" class="empty-wrap">暂无相关订单</div>
            </div>
			<span style="display:none;">{{num}}</span>
              <!-- <div class="pager">
                 	<el-pagination 
								@size-change="handlePageSizeChange" 
								@current-change="handleCurrentPageChange" 
								:current-page="currentPage" 
								:page-size="pageSize" 
								background 
								:pager-count="5" 
								prev-text="上一页" 
								next-text="下一页" 
								hide-on-single-page 
							
							></el-pagination>
                </div> -->
        </el-card>
		</div>
	</div>
</template>

<script>
import { goodsPage } from '@/api/groupbuy';
import { mapGetters } from 'vuex';
import { adList } from '@/api/website';
import { biddingpage } from "@/api/member/competitive"

import { pintuanlist } from "@/api/pintuan"

export default {
	name: 'pintuanlist',
	components: {},
	data: () => {
		return {
			loading: true,
			goodsList: [],
			total: 0,
			currentPage: 1,
			pageSize: 10,
			loadingAd: true,
            adList: [],
            orderList: [],
            total: 0,
            currentPage: 1,
            pageSize: 6,
            loading: true,
            yes: true,
            num: 0,
			Math: "",
			pintuanList: [],
			countDownNum:0,

			day:0,
			hr:0,
			min:0,
			sec:0,
		};
    },
    mounted: function () {
		this.countdown()
        let self = this
        setTimeout(function () {
            self.yes = false
        }, 300)
    },
	created() {

		if (this.addonIsExit && this.addonIsExit.groupbuy != 1) {
			this.$message({
				message: '团购插件未安装',
				type: 'warning',
				duration: 2000,
				onClose: () => {
					this.$route.push('/');
				}
			});
		} else {
			this.getAdList();
		}
		this.getPintuanlist();
	},
	computed: {
		...mapGetters(['defaultGoodsImage', 'addonIsExit'])
	},
	watch: {
		addonIsExit() {
			if (this.addonIsExit.groupbuy != 1) {
				this.$message({
					message: '团购插件未安装',
					type: 'warning',
					duration: 2000,
					onClose: () => {
						this.$route.push('/');
					}
				});
			}
		}
	},
	methods: {
		countdown: function () {
			let that = this;
			that.countDownNum ++;
			for(let i in this.pintuanList){
				let item = this.pintuanList[i];
				let time_data = {};
				// 定义结束时间戳
				var x = this.$timeStampTurnTime(item.end_time)
				const end = Date.parse(new Date(x))
					// 定义当前时间戳
				const now = Date.parse(new Date())
					// 做判断当倒计时结束时都为0
				if (now >= end) {
					time_data.day = '00'
					time_data.hr = '00'
					time_data.min = '00'
					time_data.sec = '00'
					item.time_data = time_data;
					continue;
				}
				// 用结束时间减去当前时间获得倒计时时间戳
				const msec = end - now
				let day = parseInt(msec / 1000 / 60 / 60 / 24) //算出天数
				let hr = parseInt(msec / 1000 / 60 / 60 % 24) //算出小时数
				let min = parseInt(msec / 1000 / 60 % 60) //算出分钟数
				let sec = parseInt(msec / 1000 % 60) //算出秒数
				//给数据赋值
				time_data.day = day
				time_data.hr = hr > 9 ? hr : '0' + hr
				time_data.min = min > 9 ? min : '0' + min
				time_data.sec = sec > 9 ? sec : '0' + sec
				item.time_data = time_data;
			}
			// 使用定时器 然后使用递归 让每一次 函数能调用自己达到倒计时效果
            setTimeout(function() {
                that.countdown()
            }, 1000)
		},
		getPintuanlist() {
			pintuanlist({
				page: 1,
				page_size: 10,
				pintuan_id: 28,
				site_id: 0,
				pintuan_type: 2,
			})
				.then(res=>{
					if(res.code == 0) {
						let list = res.data.list;
						for(let i in list){
							list[i].time_data = {
								day : '00',
								hr : '00',
								min : '00',
								sec : '00',
							}
						}
						this.pintuanList = res.data.list;
						this.loading = false;
						//this.countdown();
					}
				})
				.catch(err=>{
					//console.log(err)
					this.loading = false;
				})
		},
        getTime() {
            
        },
        button(id){
			console.log('/promotion/pintuandetial/sku-' + id)
            this.$router.push({ path: "/promotion/pintuandetail/sku-" + id })
        },
		getAdList() {
			adList({ keyword: 'NS_PC_GROUPBUY' })
				.then(res => {
					this.adList = res.data.adv_list;
					for (let i = 0; i < this.adList.length; i++) {
						if (this.adList[i].adv_url) this.adList[i].adv_url = JSON.parse(this.adList[i].adv_url);
					}
					this.loadingAd = false;
				})
				.catch(err => {
					this.loadingAd = false;
				});
		},
		/**
		 * 图片加载失败
		 */
		imageError(index) {
			this.goodsList[index].sku_image = this.defaultGoodsImage;
		}
	}
};
</script>
<style lang="scss" scoped>

.box {
    width: 100%;
    position: relative;
}
.null-page {
    width: 100%;
    height: 730px;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}
.detail_list {
	float: left;
    width: 260px;
    height: 385px;
    border: 1px solid #eeeeee;
    margin: 15px;
    display: inline-block;
    justify-content: center;
    position: relative;
    img {
        width: 257px;
        height: 241px;
        margin: 16px 0 0 15px;
    }
    .timeShow {
        padding: 10px;
        background: #ffe5e5;
        border: 0px solid #2b2f30;
        position: absolute;
        top:209px;
        right: -12px;
        text-align: center;
        color: red;
        font-size: 16px;
	}
	
	p{
		.ori_price {
			left: 0;
			position: absolute;
			bottom:30px;
		}
	}
    span {
        display: inline-block;
        width: 253px;
        height: 35px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 21px;
        margin: 18px 0 0 15px;
    }
    p {
        font-size: 20px;
        font-family: Roboto;
        font-weight: 500;
        color: #ff5f8a;
        display: inline-block;

        margin: 20px 0 0 14px;
    }
    button {
        width: 75px;
        line-height: 0px;
        color: #ffffff;
        height: 28px;
        background: #ff5f8a;
        border: 0px solid #2b2f30;
        border-radius: 3px;
        position: absolute;
        right: 14px;
        margin-top: 6px;
    }
}

.detail_list {
    width: 260px;
    height: 385px;
    border: 1px solid #eeeeee;
    margin: 15px;
    display: inline-block;
    justify-content: center;
    position: relative;
    img {
        width: 257px;
        height: 241px;
        margin: 16px 0 0 15px;
    }
    .timeShow {
        padding: 10px;
        background: #ffe5e5;
        border: 0px solid #2b2f30;
        position: absolute;
        top:209px;
        right: -12px;
        text-align: center;
        color: red;
        font-size: 16px;
    }
    span {
        display: inline-block;
        width: 253px;
        height: 35px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 21px;
        margin: 18px 0 0 15px;
    }
    p {
        font-size: 20px;
        font-family: Roboto;
        font-weight: 500;
        color: #ff5f8a;
        display: inline-block;

        margin: 20px 0 0 14px;
    }
    button {
        width: 75px;
        line-height: 0px;
        color: #ffffff;
        height: 28px;
        background: #ff5f8a;
        border: 0px solid #2b2f30;
        border-radius: 3px;
        position: absolute;
        right: 14px;
        margin-top: 6px;
    }
}
.pager{
    margin-top: 20px;
}
.ns-groupbuy {
	background: #ffffff;
	.ns-groupbuy-box {
		padding-top: 54px;
		width: $width;
		margin: 0 auto;

		.ns-groupbuy-title {
			width: 100%;
			border-bottom: 1px solid $base-color;
			padding-bottom: 10px;

			i {
				font-size: 32px;
				color: $base-color;
			}

			span {
				font-size: 30px;
				font-family: 'BDZongYi-A001';
				font-weight: 600;
				color: $base-color;
				margin-left: 15px;
			}
		}
	}
	.goods-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 45px;

		.item {
			width: 20%;
			padding: 0 6px;
			box-sizing: border-box;
			margin-bottom: 16px;

			.goods {
				width: 100%;
				border: 1px solid #e9e9e9;
				background-color: #ffffff;
				overflow: hidden;
				color: #303133;
				transition: 0.3s;
				padding: 10px;
				box-sizing: border-box;
				cursor: pointer;
			}
		}

		.img {
			width: 100%;
			height: 100%;

			.el-image {
				width: 100%;
				height: 208px;
				.el-image__error {
					width: 100%;
					height: 100%;
				}
			}
		}

		.price {
			p {
				display: flex;
				align-items: flex-end;
				height: 24px;
				color: $base-color;
				margin: 10px 0 5px;

				span:first-child {
					font-size: 20px;
					font-family: 'BDZongYi-A001';
					font-weight: 600;
					margin-right: 5px;
					line-height: 24px;
				}
				span:nth-child(2) {
					line-height: 14px;
				}
			}

			.main_price {
				color: $base-color;
				font-size: 25px;
				line-height: 24px;
				font-weight: 500;
			}

			.primary_price {
				text-decoration: line-through;
				color: $base-color-info;
				margin-left: 5px;
			}
		}

		.name {
			font-size: 14px;
			line-height: 1.4;
			margin-bottom: 5px;
			white-space: normal;
			overflow: hidden;
			
			p {
				line-height: 24px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				height: 50px;
			}
		}
	}
}
</style>
<style lang="scss">
.ns-groupbuy {
	.el-carousel {
		.el-image__inner {
			width: auto;
		}
	}
	.el-carousel__arrow--right{
		right: 60px;
	}
}
</style>
